<template>
  <div class="component-container">
    <div class="component-content">
      <slot></slot>
    </div>
    <div class="footer">
      <vi-button circle @click="() => { copy(rawHtml); message('已复制代码') }">
        <template #icon>
          <CopyIcon width="16" height="16" />
        </template>
      </vi-button>
      <vi-button circle @click="toggleCodePreview">
        <template #icon>
          <CodeIcon width="16" height="16" />
        </template>
      </vi-button>
    </div>
    <div class="code-preview" ref="codePreview" style="display: none;">
      <pre><code v-html="highlighted.value" /></pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useClipboard } from '@vueuse/core';
import { message } from '@/vivid-ui/utils/message';
import hljs from 'highlight.js';
import CopyIcon from '@/components/icons/CopyIcon.vue';
import CodeIcon from '@/components/icons/CodeIcon.vue';
const { copy } = useClipboard();
const { rawHtml } = defineProps(['rawHtml']);
const codePreview = ref(null);
const codeVisible = ref(false);

const highlighted = hljs.highlightAuto(rawHtml ?? '<template></template>', ['html', 'javascript', 'css']);

const toggleCodePreview = () => {
  codeVisible.value = !codeVisible.value;
  const el = codePreview.value as unknown as HTMLElement;
  el.style.display = codeVisible.value ? 'block' : 'none';
}

</script>
<style lang="scss" scoped>
.header {
  display: flex;
}

.component-container {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.component-content {
  width: 80%;
  padding: 10px;
}

.footer {
  width: 100%;
  padding: 5px;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  padding: 2px 4px;
  white-space: pre;
  color: var(--text-color);
}

pre {
  white-space: pre;
  margin: 0;
}
</style>
